<template>
  <div class="login-wrap">
    <!-- 头部 -->
    <div id="header">
      <div class="top-header">
        <img src="../assets/images/logo.png" />
        <p>商家平台登录中心</p>
      </div>
      <div class="top-1">
        <img src="../assets/images/xiaoxi_06.png" />
        <span>登录页面,调查问卷</span>
      </div>

      <div class="foot-header">
        <img src="../assets/images/jingao_11.png" />
        <p>
          依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！新版《<span>鲸鱼商城隐私政策</span>》已上线，将更有利于保护您的个人隐私。
        </p>
      </div>
    </div>

    <div class="wrap clearfix">
      <div class="form-box fr loginV2" style="display: block">
        <ul class="form-tab clearfix">
          <li class="tab-li">
            <a href="javascript:;" tjjj="passport.login_type.wixin_qrcode"
              >微信登录<i class="icon"></i
            ></a>
          </li>
          <li class="tab-li cur">
            <a href="javascript:;" tjjj="passport.login_type.login_name"
              >账号登录</a
            >
          </li>
        </ul>
        <div class="form-con">
          <!-- 微信登录 -->
          <div class="weixin-login" style="display: none">
            <div class="wx-box clearfix">
              <a href="javascript:;" class="wx-img-box">
                <img
                  class="wx-qrCode"
                  src="../assets/images/ewm.jpg"
                  id="qrCodeImg"
                />
                <img
                  class="wx-qrCode-logo"
                  src="../assets/images/ewm.jpg"
                  id="qrCodeLogo"
                />
                <img
                  class="statusImg"
                  src="../assets/images/wx-confirm.png"
                  id="statusImg"
                />
                <div id="weixin_login_container" style="display: none"></div>
              </a>
              <img src="../assets/images/wx-image.png" class="wx-image" />
            </div>
            <p class="wx-text">微信扫一扫 快速登录</p>
            <p class="wx-help">
              <a href="javascript:;" class="help-a">如何使用？</a>
            </p>
          </div>

          <!-- 账号密码登录 -->
          <div class="login-normal" style="display: block">
            <!-- 登录表单区域 -->
            <!-- ref重置表单时需要获取全局对象；  rules 表单验证;  model 绑定input属性值-->
            <el-form
              id="nameLoginForm"
              ref="loginFormRef"
              :model="loginForm"
              :rules="loginFormRules"
              label-width="0px"
              class="login_form"
            >
              <!-- 用户名 -->
              <el-form-item prop="username">
                <el-input
                  v-model="loginForm.username"
                  prefix-icon="iconfont icon-user"
                ></el-input>
              </el-form-item>
              <!-- 密码 -->
              <el-form-item prop="password">
                <el-input
                  v-model="loginForm.password"
                  prefix-icon="iconfont icon-3702mima"
                  type="password"
                ></el-input>
              </el-form-item>
              <div class="form-remember">
                <!-- `checked` 为 true 或 false -->
                <el-checkbox v-model="checked">三个月之内免登录</el-checkbox>
              </div>
              <el-form-item class="btns">
                <el-button type="primary" @click="login">登录</el-button>
                <el-button type="info" @click="loginFormRef">重置</el-button>
              </el-form-item>
              <div class="link-box clearfix">
                <a
                  href="javascript:;"
                  class="register"
                  tjjj="passport.login.fstreg"
                  >新用户注册</a
                >
                <a
                  href="javascript:;"
                  class="forget-pass"
                  tjjj="passport.forget.password"
                  >忘记密码？</a
                >
              </div>
              <!-- 按钮区域 -->
            </el-form>

            <!-- 使用合作账号登录 -->
            <div class="login-short clearfix">
              <div class="short-left">
                <h3>使用合作账号登录：</h3>
                <ul class="clearfix">
                  <li class="qq">
                    <a
                      a
                      href="javascript:;"
                      tjjj="passport.login.thd.login.qq"
                    ></a>
                  </li>
                  <li class="sina">
                    <a
                      href="javascript:;"
                      tjjj="passport.login.thd.login.sina"
                    ></a>
                  </li>
                  <li class="weixin">
                    <a
                      href="javascript:;"
                      tjjj="passport.login.thd.login.weixin"
                    ></a>
                  </li>
                </ul>
              </div>
              <div class="short-right">
                <h3>您还可以选择：</h3>
                <p class="phone-short clearfix">
                  <i class="phone"></i>
                  <a href="javascript:;" tjjj="" class="txt phoneLogin"
                    >手机快捷登录</a
                  >
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- -快捷登录 -->
      <div class="form-box fr shortLogin" style="display: none">
        <h5 class="title">快捷登录</h5>
        <div class="form-con">
          <form
            id="mobileLoginForm"
            method="post"
            onsubmit="return mobileLoginCheck();"
          >
            <div class="form-error" style="">
              <i></i><label class="text"></label>
            </div>
            <dl class="clearfix">
              <dt>手机号：</dt>
              <dd>
                <input
                  name="mobile"
                  type="text"
                  id="partnerPhone"
                  autocomplete="off"
                  class="input-text mobile"
                  maxlength="11"
                  onblur="mobileCheck(this);"
                /><span class="placeholder">请输入手机号</span>
              </dd>
            </dl>
            <dl class="top1 clearfix">
              <dt>验证码：</dt>
              <dd>
                <input
                  name="smsCaptcha"
                  type="text"
                  id="partnerYzm"
                  class="input-yzm"
                  onblur="captchCheck(this);"
                  maxlength="4"
                  autocomplete="off"
                />
                <span class="span-yzm">
                  <img
                    id="smsCaptchaImage"
                    src="images/code.jpg"
                    title="点击图片刷新校验码"
                    alt="点击图片刷新校验码"
                    onclick="changeCode('smsCaptchaImage','partnerYzm');"
                  />
                  <a
                    href="javascript:changeCode('smsCaptchaImage','partnerYzm');"
                    class="forget-pass"
                    >换一张</a
                  >
                </span>
              </dd>
            </dl>
            <dl class="top2 clearfix">
              <dt>校验码：</dt>
              <dd>
                <input
                  name="code"
                  type="text"
                  id="partnerJym"
                  class="input-jym"
                  maxlength="6"
                  autocomplete="off"
                />
                <a
                  id="smsSendButton"
                  href="javascript:sendSms(this);"
                  class="span-jym disabled"
                  tjjj="passport.send.msg"
                  >发送短信校验码</a
                >
              </dd>
            </dl>
            <div class="form-remember">
              <input
                name="rememberName"
                type="checkbox"
                id="remUser"
                class="rem-check"
                style="display: none"
                checked="checked"
              />
              <span class="rem-box rem-box-r"
                ><input
                  name="rememberMe"
                  type="checkbox"
                  id="remLogin"
                  class="rem-check"
                />三个月之内免登录</span
              >
            </div>
            <div class="btn-box clearfix">
              <input
                id="partnerSubmit"
                class="btn-settlement"
                type="submit"
                value="登    录"
                tjjj="passport.quick.button.login"
              />
            </div>
            <div class="link-box clearfix">
              <a href="javascript:;" class="backLogin" id="phoneLogin"
                >返回账号登录>></a
              >
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- 底部导航 -->
    <div id="jia_footer">
      <div class="jia_foot_info">
        <div class="jia_foot_con">
          <p class="jia_foot_link">
            <a href="#" rel="nofollow" target="_blank">关于我们</a
            ><span class="jia_split">|</span>
            <a href="#" target="_blank" rel="nofollow">联系我们</a
            ><span class="jia_split">|</span>
            <a href="#" target="_blank" rel="nofollow">媒体报道</a
            ><span class="jia_split">|</span>
            <a href="#" target="_blank" rel="nofollow">法律声明</a
            ><span class="jia_split">|</span>
            <a href="javascript:;/help/0002.html" target="_blank" rel="nofollow"
              >企业文化</a
            ><span class="jia_split">|</span>
            <a href="javascript:;/link.html" target="_blank" rel="nofollow"
              >友情链接</a
            ><span class="jia_split">|</span>
            <a
              href="javascript:;/jmtg/index.html"
              target="_blank"
              rel="nofollow"
              >加盟齐家</a
            ><span class="jia_split">|</span>
            <a
              href="javascript:;/zhaoshang/"
              tjjj="sjrz.2"
              target="_blank"
              rel="nofollow"
              >入驻齐家</a
            ><span class="jia_split">|</span>
            <a href="javascript:;/help/0055.html" target="_blank" rel="nofollow"
              >诚聘英才</a
            ><span class="jia_split">|</span>
            <a href="javascript:;/help/0033.html" target="_blank">网站地图</a
            ><span class="jia_split">|</span>
            <a href="javascript:;/app/" rel="nofollow" target="_blank"
              >手机齐家</a
            ><span class="jia_split">|</span>
            <a href="#" target="_blank" rel="nofollow">钱包</a
            ><span class="jia_split">|</span>
            <a href="javascript:;/help/" tjjj="bottom.link.help">帮助中心</a
            ><span class="jia_split">|</span>
            <a href="javascript:;" class="jia_foot_open">更多<i></i></a>
          </p>
          <p class="jia_foot_link footnone">
            <a href="#" target="_blank" tjjj="footer.bottom.1">找装修公司</a
            ><span class="jia_split">|</span>
            <a href="#" target="_blank" tjjj="footer.bottom.2">买建材家居</a>
          </p>
        </div>
        <p>版权所有Copyright ? 2005-2016 www.17sucai.com All rights reserved</p>
        <p>沪ICP备xxxxxx号 沪B2-xxxx 组织机构代码证：xxxxx—1</p>
        <p>中国互联网协会信用评价中心网信认证 网信编码:xxxxxx1</p>

        <p>
          <a href="javascript:;">
            <img
              src="../assets/images/gov-inco.jpg"
              border="0"
              width="40"
              height="44"
            />
          </a>
          <a href="javascript:;/315/" target="_blank" style="margin-left: 15px">
            <img src="../assets/images/315.gif" border="0" />
          </a>
          <a style="margin-left: 15px" target="_blank" href="javascript:;">
            <img border="0" src="../assets/images/jb.jpg" />
          </a>
        </p>
      </div>
    </div>
  </div>
</template>


<script>
import $ from 'jquery'

//跳转微信登录
$(function () {
  $('.form-tab li').on('click', function () {
    var index = $(this).index()
    $(this).addClass('cur').siblings().removeClass('cur')
    $('.form-con>div').hide().eq(index).show()
    if (index == 0) {
      $('.form-foot').hide()
    } else {
      $('.form-foot').show()
    }
    $('.form-error').hide()
  })
  $('.weixin-login .help-a').hover(
    function () {
      $('.wx-img-box,.wx-image').stop()
      $(this)
        .parents('.weixin-login')
        .find('.wx-img-box')
        .animate({ marginLeft: '15px' }, 300, function () {
          $(this)
            .parents('.weixin-login')
            .find('.wx-image')
            .animate({ opacity: 1 }, 300)
        })
    },
    function () {
      $('.wx-img-box,.wx-image').stop()
      $(this)
        .parents('.weixin-login')
        .find('.wx-image')
        .stop()
        .animate({ opacity: 0 }, 300, function () {
          $(this)
            .parents('.weixin-login')
            .find('.wx-img-box')
            .animate({ marginLeft: '110px' }, 300)
        })
    }
  )
})

//开启错误提示
function showError(error) {
  $('.form-error').find('label').html(error)
  $('.form-error').show()
}

export default {
  data() {
    return {
      //这个是登录表单的数据绑定对象
      loginForm: {
        username: '',
        password: '',

      },
      //这是表单的验证规则对象
      loginFormRules: {
        //验证用户名是否合法
        username: [
          //trigger: 'blur'当鼠标离开输入框时触发
          { required: true, message: '请输入登录名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
        //验证密码是否合法
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '长度在 6 到 15 个字符',
            trigger: 'blur',
          },
        ],
      },
      //多选框 记住密码
      checked: false,
      //登录唯一id
      loginId: '',
      //密码加密key
      encodeKey: '',
    }
  },

  created() {},
  methods: {
    //点击重置按钮，重置登录表单
    loginFormRef() {
      // console.log(this)
      // loginFormRef是el-form ref属性值   resetFields()对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
      this.$refs.loginFormRef.resetFields()
    },

    //登录准备-获取RSA算法加密key
    async loginReady() {
      const {data:res}  = await this.$http.get('api/global/login.ready', {
        params: { username: this.loginForm.username },
      })
      // console.log(res.data.encodeKey)
      if (res.code !== 200) {
        this.$message.error('登录初始化失败')
        return '201'
      }

      this.encodeKey = res.data.encodeKey
      this.loginId = res.data.loginId
      //  console.log(res.data.data.encodeKey)
      return '200'
    },

    // 使用同步调用 async  await等待当前执行完   如果不设置的话 response会没有结果，因为下面response的可能会比调用api还要快
    login() {
      //validate()对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，
      //并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise
      this.$refs.loginFormRef.validate(async (valid) => {
        //valid第一个参数返回一个布尔值，验证表单是否通过
        if (!valid) return

        const ret = await this.loginReady()
        // console.log(ret)
        if (ret !== '201') {
          //使用RSA算法对密码进行加密
          const raspw = this.$getRsaCode(
            this.encodeKey,
            this.loginForm.password
          )

          //获取返回结果的data字段里数据
          const {data: res}  = await this.$http.post(
            'api/global/login.pwd',{
              'password':raspw,
              'loginId':this.loginId
            }

          )
          // console.log(res)
          //登录失败
          if (res.code !== 200) return this.$message.error(res.msg)
          this.$message.success('登录成功')
          //1.将登录成功之后的token，保存到客户端的sessionStorage中
          //1.1 项目中除了登录之外的其他API接口，必须在登录之后才能访问
          //1.2 token只应在当前网站打开期间生效，所有将token保存在客户端的sessionStorage中
          window.sessionStorage.setItem('token','Bearer '+res.data.accessToken)
           //JSON.stringify() 对象转json字符串
        window.sessionStorage.setItem(
          'user',JSON.stringify(res.data)
        )
          //2.通过编程式导航跳转到后台主页，路由地址是 /home
          this.$router.push('/home')
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.login-wrap{
  width: 1372px;
  margin: auto;
}
.el-button--primary {
  background-color: #d00;
  border-color: #d00;
  width: 145px;
}
.el-button--info {
  width: 145px;
}
.form-remember {
  padding: 0px 0 10px;
}
.el-form-item {
  margin-bottom: 16px;
}
.btn_tab_login {
  float: right;
  margin-top: 48px;
}
.btn_tab_login li {
  display: inline-block;
  margin-left: 30px;
  font-size: 14px;
}
.btn_tab_login li.cur a {
  color: #d00;
}
#weixin_login_container iframe {
  width: 158px;
  height: 158px;
}
.top-header {
  margin-left: 210px;
  margin-top: 10px;
}
.top-header img {
  height: 75px;
}
.top-header p {
  font-size: 26px;
  font-weight: 600;
  margin-left: 50px;
  position: absolute;
  top: 30px;
  left: 580px;
}
.foot-header {
  background: #fff8f0;
  text-align: center;
  height: 35px;
  line-height: 35px;
  margin-top: 5px;
}
.foot-header p span {
  font-size: 12px;
  font-weight: 600;
  color: black;
}
.foot-header img {
  float: left;
  position: absolute;
  left: 335px;
  top: 104px;
}
.top-1 {
  position: absolute;
  top: 70px;
  left: 1150px;
  width: 130px;
}
.top-1 span {
  margin-left: 10px;
}
</style>
